/*
 * @Description: 登陆页面
 * @Author: kanglin
 * @Date: 2018-06-08 17:52:17
 * @Copyright: Created by Panxsoft.
 */

 <style lang="less" scoped rel="stylesheet/less" type="text/less" >
	@import '~src/assets/css/common.less';
	.wechat.v-login{
		display: none;
	}
	.v-login{
		input,
		textarea {
			border: 0;
			-webkit-appearance: none;
		}
		.login__logo {
			width: 206*@rem-per-px;
			height: 146*@rem-per-px;
			margin: 238*@rem-per-px auto 0;
			background-size: 100%;
			background-repeat: no-repeat;
			background-image: url(//gz.bcebos.com/v1/beauty-mirror/wx_system/collection/LOGO.png);
		}

		.login_form{
			width: 480*@rem-per-px;
			margin: 0 auto;
			margin-top: 64*@rem-per-px;
			line-height: 96*@rem-per-px;
		}
		.login__form_input{
			width: 100%;
			height: 36*@rem-per-px;
			// box-sizing: border-box;
			border: 1px solid #cccccc;
			border-radius: 58*@rem-per-px;
			margin-bottom: 34*@rem-per-px;
			font-size: 36*@rem-per-px;
			color: #444444;
			padding: 30*@rem-per-px 0;
			line-height: normal;
			text-align: center;
			&::-ms-input-placeholder{
				text-align: center;
			}
			&::-webkit-input-placeholder{
				text-align: center;
			}
		}
		.login__form_submit:focus,
		.login__form_input:focus {
			outline: none;
		}
		.login__form_submit{
			width: 100%;
			height: 96*@rem-per-px;
			border-radius: 58*@rem-per-px;
			box-sizing: border-box;
			border: 0;
			font-size: 32*@rem-per-px;
			color: #ffffff;
			background-image: linear-gradient(90deg, #c27af8, #ffa4cc);
		}
		.login-tip{
			margin-top: 108*@rem-per-px;
			text-align: center;
			font-size: 28*@rem-per-px;
			color: #b2b2b2;
		}
		.collection__tips{
			position: absolute;
			text-align: center;
			font-size: 24*@rem-per-px;
			color: #b2b2b2;
			width: 100%;
			bottom: 40*@rem-per-px;
		}
	}
 </style>

<template>
	<div class="v-login">

		<div class="login__logo"/>

		<div class="login_form">
			<input
				v-model="form.phone"
				:placeholder="$t('login.phone_placeholder')"
				name="login__phone"
				class="login__form_input"
				type="text">
			<input
				:value="$t('login.submit')"
				class="login__form_submit"
				type="submit"
				name="login__submit"
				@click.prevent="handleSubmit">
		</div>

		<p class="login-tip">
			{{ $t('login.login_tips') }}
		</p>

		<p
			v-if="!$status.isWebApp()"
			class="collection__tips">
			{{ this.$t('login.collection_tips') }}
		</p>

	</div>

</template>

<script>
import { mapActions, mapGetters } from 'vuex';
// import { parseQueryString } from 'src/utils/helper';

import InitData from 'src/utils/initData';
import API_LIST from 'src/API_LIST';

// import store from 'src/vuex/store';
// http://mirror.me/dev-wx?customer_id=77#/login

export default {
	name: 'Login',
	data() {
		return {
			form: {
				scan_event_id: null,
				phone: '',
				language: 'zh-CN',
				customer_id: null,
			},
			store_id: null,
			favor_id: null,
		};
	},
	computed: {
		...mapGetters('userInfo', ['getUserInfo']),
	},
	mounted() {
		this.initH5page(this.$status);
	},
	methods: {
		...mapActions('login', ['loginH5User']),
		...mapActions('collection', ['postCollectionAction']),

		/**
		 * 给用户收藏试妆
		 * @param {number} scan_event_id
		 * @param {number} openid
		 * @param {number} scan_event_id
		 */
		collectMakeup(favor_id, openid, scan_event_id) {
			this.postCollectionAction({ // 收藏
				id: favor_id,
				form: { openid, scan_event_id },
			}).then(() => {
				this.$router.replace({ path: `/collection/${favor_id}` }); // 转到 收藏详情
			}).catch((error) => {
				const toast = this.$createToast({
					type: 'warn',
					time: 2000,
					txt: error.message,
				});
				toast.show();
				window.setTimeout(() => this.$router.replace({ path: '/' }), 2000);
			});
		},

		/**
		 * 初始化页面参数
		 * @param {Object} param {浏览器环境状态管理对象集合}
		 * @return {undefined}
		 */
		initH5page({
			customer_id, lang, scan_event_id, favor_id,
		}) {
			if (customer_id && scan_event_id) {
				this.form.customer_id = customer_id;
				this.form.scan_event_id = scan_event_id;
				this.form.language = lang || this.form.language;
				this.favor_id = favor_id;
			} else { // 参数
				const toast = this.$createToast({
					txt: this.$t('login.argument_error'),
					type: 'error',
					time: 2000,
				});
				toast.show();
			}
		},

		/**
		 * 关闭当前页面
		 * @param {number} delay {毫秒}
		 * @return {undefined}
		 */
		closePage(delay) {
			window.setTimeout(() => {
				window.close();
			}, delay);
		},

		/**
		 * 判断是否是数字
		 * @param {String} str {电话号}
		 * @return {Boolean}
		 */
		isNumber(str) {
			return /^\d+$/.test(str);
		},

		/**
		 * 判断是否在中文环境
		 * @return {Boolean}
		 */
		isChina() {
			return this.$i18n.locale === 'zh-CN';
		},

		/**
		 * 校验表单
		 * @param {Object} form {表单参数对象}
		 * @return {undefined}
		 */
		validateForm(form) {
			const result = { tips: '', is_valid: true };
			// if (this.isChina() && !PHONE_PATTERN.test(form.phone)) {
			// 	result.tips = this.$t('login.phone_invalid');
			// 	result.is_valid = false;
			// 	return result;
			// }
			if (!this.isNumber(form.phone)) {
				result.tips = this.$t('login.phone_invalid');
				result.is_valid = false;
				return result;
			}
			return result;
		},

		/**
		 * 提交表单
		 * @return {undefined}
		 */
		handleSubmit() {
			const result = this.validateForm(this.form);
			if (result.is_valid) {
				this.login(this.form);
			} else {
				const toast = this.$createToast({
					type: 'error',
					time: 2000,
					txt: result.tips,
				});
				toast.show();
			}
		},

		/**
		 * 重定向测肤用户
		 * @param {Object} user {登录成功后返回数据}
		 * @return {undefined}
		 */
		redirectForH5TestSkinUser(user) {
			if (user.born_at || user.age) {
				this.$router.replace({ path: '/' });
			} else {
				this.$router.replace({ path: '/information' });
			}
		},

		/**
		 *  执行登录操作
		 * @param {Object} form {表单参数}
		 * @return {undefined}
		 */
		login(form) {
			return this.loginH5User(form) // 登录
				.then((user) => {
					this.getLocation(user.openid);
					const is_collection_sacn_event = !!this.favor_id;
					if (is_collection_sacn_event) {
						this.collectMakeup(this.favor_id, user.openid, form.scan_event_id);
					} else {
						this.redirectForH5TestSkinUser(user);
					}
				})
				.catch((error) => {
					const toast = this.$createToast({
						type: 'error',
						time: 2000,
						txt: error.message,
					});
					toast.show();
				});
		},

		/**
		 * 获取地理位置
		 * @return {undefined}
		 */
		getLocation(openid) {
			const param = {
				upload_location_url: API_LIST.USER_LOCATION,
			};

			const initClass = new InitData(param);

			initClass.getLocation(openid);
		},

	},
};
</script>
